<template>
  <view>
    <l-form-cell label="档次" :must="must" has-slot :arrow="!disabled" @click="bindCarDegree">
      <view class="form-item flex-row flex-item align-center justify-end">
        <text class="text-30" :class="['color-t' + (form.autoClass || showType === 'detail' ? 1 : 3)]">{{ degreeLabel || '请选择档次' }}</text>
      </view>
    </l-form-cell>
    <l-form-cell v-if="status != 1 && status != 2" label="运输证发证日期" has-slot :must="must" :arrow="!disabled" @click="changeDate('bizDate')">
      <view class="form-item flex-row flex-item align-center justify-end">
        <text class="text-30" :class="['color-t' + (form.bizDate ? 1 : 3)]">{{ form.bizDate || '请选择日期' }}</text>
      </view>
    </l-form-cell>
    <l-form-cell v-if="status != 1 && status != 2" label="运输证年检时间" has-slot unlined :must="must" :arrow="!disabled" @click="changeDate('bizExp')">
      <view class="form-item flex-row flex-item align-center justify-end">
        <text class="text-30" :class="['color-t' + (form.bizExp ? 1 : 3)]">{{ form.bizExp.slice(0, 7) || '请选择日期' }}</text>
      </view>
    </l-form-cell>
  </view>
</template>

<script>
export default {
  name: 'TransportInfoModel',
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    must: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    status: {
      type: [String, Number],
      default: 0
    },
    degreeLabel: {
      type: String,
      default: ''
    },
    showType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      form: {
        autoClass: '',
        bizDate: '',
        bizExp: ''
      }
    }
  },
  watch: {
    data: {
      handler(e) {
        Object.assign(this.form, e)
      },
      deep: true
    },
    form: {
      handler() {
        this.$emit('update', this.form)
      },
      deep: true
    }
  },
  methods: {
    // 设置汽车档次
    bindCarDegree() {
      if (this.disabled) return
      this.$emit('changeCarDegree')
    },
    // 修改日期
    changeDate(attr) {
      if (this.disabled) return
      this.$emit('changeDate', attr)
    }
  }
}
</script>

<style scoped lang="scss">

</style>
